<template>
  <view>
    <!-- 页面标题 -->
    <view class="title" v-if="current!==tabList.length-1"  style="box-sizing: content-box;"
          :style="{background:barStyle.background,paddingTop:barStyle.paddingTop,height:`${systemInfo.barHeight}px`}">
      <view class="top-c">
       <image class="xb-logo"
			 v-if="current===0"
               :src="scrollTop?'/static/img/home/logo-c.png':'/static/img/home/logo.png'" mode="widthFix">
        </image>
				<text  v-if="current!==0">{{tabList[current].text}}</text>
      </view>
    </view>
    <view class="u-page" :style="{paddingTop:systemInfo.pagePaddingTop}">
      <!-- 所有内容的容器 -->
      <Home v-show="current===0"/>
			<Work v-show="current===1&&isLogin&&userAc.wxBind" />
      <Tome v-show="current===tabList.length-1"/>
    </view>
    <!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
    <u-tabbar v-model="current" height='112' :list="tabList" active-color="#44D94B" icon-size='40' :hide-tab-bar="true" @change="tabbarChange"></u-tabbar>
    <view class="nologinbg" v-if="current===0"></view>
  </view>
</template>

<script>
import Home from "./home";
import Tome from "./mine";
import Work from "./work";
import Information from "./information";
import { mapGetters } from 'vuex'
export default {
  name: "index",
  components: {Home, Tome,Work,Information},
  computed:{
    ...mapGetters({tabIndex:'tabbar/getTabIndex'})
  },
  data() {
    return {
      userAc:null,
			showLogo:false,
			isLogin:false,
      topBarHeight:0,
      systemInfo: {
        version: '', // 小程序基础库版本号（兼容小程序api用）
        statusBarHeight: 0, // 手机状态栏的高度
        isIos: false, // 是否为ios
      },
			barStyle:{
				background:'',
				paddingTop:'0px',
			},
      scrollTop: 0,
      current: 0,
      clientId:'',
      tabList: this.$store.state.tabbar.tabList
    }
  },
	watch:{
		scrollTop(val){
      if(this.current===0){
        if(val>0){
          this.barStyle.background='#fff'
        }else{
          this.barStyle.background=''
        }
      }
		}
	},
  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },
  onShow(){
    if (this.isLogin&&this.userAc.wxBind){
      this.tabList=this.$store.state.tabbar.tabListRol
    }else {
      this.tabList=this.$store.state.tabbar.tabList
    }
    this.current=this.$store.state.tabbar.tabIndex
    console.log("this.current",this.current,this.tabList)
    this.$forceUpdate()
  },
	created() {
		this.isLogin = uni.getStorageSync("isLogin")
    this.userAc=uni.getStorageSync("userAc")

    if (this.isLogin&&this.userAc.wxBind){
      this.tabList=this.$store.state.tabbar.tabListRol

			// #ifdef APP-PLUS
			this.clientId=uni.getStorageSync("clientId")
			this.apis.commonApi.bindCilentId({
				clientId:this.clientId,
				uId:this.userAc.userInfo.userId
			}).then(res=>{

			})
			// #endif
    }else {
      this.tabList=this.$store.state.tabbar.tabList
    }
    this.current=this.$store.state.tabbar.tabIndex

		uni.getSystemInfo({
			success: (res) => {
				this.systemInfo.statusBarHeight = res.statusBarHeight; // 手机状态栏的高度
				if (res.platform == "ios" || res.system.indexOf('iOS') > -1 || res.system.indexOf(
						'macOS') > -1) {
					// 是否为ios这里包括ipad和macos
					this.systemInfo.isIos = true;
				}
        this.systemInfo.barHeight = this.systemInfo.isIos ?  44 :  46
        this.systemInfo.pagePaddingTop=this.systemInfo.barHeight+res.statusBarHeight+10+'px'
        this.barStyle.paddingTop=res.statusBarHeight+'px'
        this.$store.commit("com/setSystemInfo", this.systemInfo)
			}
		})
	},
  methods: {
    tabbarChange(val){
      this.$store.commit('tabbar/changeTabIndex',val)
      if(val===0){
        this.barStyle.background=''
      }else{
        this.barStyle.background='#fff'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  position: fixed;
  z-index: 999;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000000;
  font-size: 26rpx;

  .top-c {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
		justify-content: center;
    padding-left: 20rpx;
  }

  .xb-logo {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
    width: 200rpx;
  }
}
.bigpage{
  width: 100vw;
  position: relative;
}

.nologinbg {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 760rpx;
  background: linear-gradient(180deg, #17C25B 0%, rgba(23, 194, 90, 0) 100%);
}

.u-page{
  padding: 0 20rpx;
  background: #f8f8f8;
}

/deep/ .u-tabbar{
	.u-tabbar__content__item__button{
		top: 24rpx;
	}
	.u-tabbar__content__item__text{
		bottom: 12rpx;
		font-size: 20rpx;
	}
}
</style>
